<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">

<div class="wrapper wrapper-content" id="app">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="file-manager">
                        <input id="bizId" name="bizId" type="hidden" th:value="${bizId}">
                        <button type="button" class="layui-btn" id="test1" style="width: 100%;">
                            <i class="fa fa-cloud"></i>上传列表文件
                        </button>
                        <button type="button" class="layui-btn" id="test2" style="width: 100%;">
                            <i class="fa fa-cloud"></i>上传实景文件
                        </button>
                        <button type="button" class="layui-btn" id="test3" style="width: 100%;">
                            <i class="fa fa-cloud"></i>上传头像文件
                        </button>
                        <button type="button" class="layui-btn" id="test4" style="width: 100%;">
                            <i class="fa fa-cloud"></i>上传微信二维码
                        </button>
                        <div class="hr-line-dashed"></div>
                        <ul class="folder-list" style="padding: 0">
                            <!--<li><a href="#" class="file-control "
                                   onclick="changeType('', '')"><i class="fa fa-folder"></i>所有文件</a>
                            </li>-->
                            <li><a href="javascript:void(0)"
                                   class="file-control" href="javascript:void(0)"
                                   onclick="changeType(0, 'LIST')"><i class="fa fa-folder"></i>列表图片</a></li>
                            <li><a href="javascript:void(0)"
                                   onclick="changeType(1, 'REAL')" class="file-control"><i class="fa fa-folder"></i>实景图片</a>
                            </li>

                            <li><a href="javascript:void(0)" onclick="changeType(2, 'AVATAR')"
                                   class="file-control"><i class="fa fa-folder"></i>头像</a></li>
                            <li><a href="javascript:void(0)"
                                   onclick="changeType(3, 'WECHAT_QRCODE')" class="file-control"><i class="fa fa-folder"></i>微信二维码</a>
                            <li><a href="javascript:void(0)" onclick="changeType(99, 'OTHER')"
                                   class="file-control"><i class="fa fa-folder"></i>其他</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="file-box" v-for="row in rows">
                        <div class="file">
                            <a href="#">
                                <span class="corner"></span>
                                <div class="image">
                                    <img alt="image" class="img-responsive" :src="row.url">
                                </div>
                                <div class="file-name">
                                    <br/>
                                    <small>{{row.createDate}}</small>
                                </div>
                                <button class="btn btn-warning btn-xs copy" :url="row.url">复制</button>
                                <button class="btn btn-danger btn-xs" @click="remove(row.id)">删除
                                </button>
                            </a>
                        </div>
                    </div>
                    <div id="incomeNum"></div>
                </div>
            </div>
            <div>
                <ul id="page"></ul>
            </div>
        </div>
    </div>
</div>

<!--
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <form class="form-horizontal m-t" id="signupForm">

                        <div class="form-group">
                            <label class="col-sm-3 control-label">列表图片(最少3张)：</label>
                            <div class="col-sm-8">
                                <input id="bizId" name="bizId" type="hidden" th:value="${bizId}">
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">上传图片：</label>
                            <div class="col-sm-3">
                                <button type="button" class="layui-btn" id="test1" style="width: 100%;">
                                    <i class="fa fa-cloud"></i>上传文件
                                </button>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>


                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
-->


<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/appjs/usabb/attachCenter/add.js"></script>
<script type="text/javascript" src="/js/appjs/fileUpload.js"></script>

<script type="text/javascript" src="/js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="/js/content.js?v=1.0.0"></script>
<script type="text/javascript" src="/js/layui.js"></script>
<script type="text/javascript" src="/js/plugins/clipboard/clipboard.min.js"></script>
<script type="text/javascript" src="/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript" src="/js/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            total: 0,
            file: '',
            type: '',
            rows: '',
            pageInfo: {},
            pageNumber: 1,
            pageSize: 12,
        },
        methods: {
            getData: function () {
                $.getJSON("/usabb/attach/list", {
                    bizId: $('#bizId').val(),
                    imageType: this.imageType,
                    type: this.type,
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize
                }, function (r) {
                    app.total = r.data.total;
                    app.rows = r.data.records;
                    app.pageInfo = r.data;
                    app.page();
                });
            },
            page: function () {
                var options = {
                    currentPage: app.pageInfo.current, //当前页
                    totalPages: app.pageInfo.pages, //总页数
                    numberofPages: 4, //显示的页数
                    bootstrapMajorVersion: 3,
                    alignment: 'center',
                    size: 'large',
                    shouldShowPage: true,
                    itemTexts: function (type, page, current) { //修改显示文字
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "尾页";
                            case "page":
                                return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {
                        app.pageNumber = page;
                        app.getData();
                    }
                };
                $('#page').bootstrapPaginator(options);
            },
            remove: function (id) {
                layer.confirm('确定要删除选中的记录？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: "/usabb/attach/remove",
                        type: "post",
                        data: {
                            'id': id
                        },
                        success: function (r) {
                            if (r.code == 0) {
                                layer.msg(r.msg);
                                app.getData();
                            } else {
                                layer.msg(r.msg);
                            }
                        }
                    });
                })
            }
        },
        created: function () {
            this.getData();
        }
    });
</script>

<script type="text/javascript">
    var clipboard = new Clipboard('button.copy', {
        text: function (trigger) {
            layer.msg('文件路径已复制到粘贴板');
            return $(trigger).attr('url');
        }
    });
    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1', //绑定元素
            url: '/usabb/attach/upload', //上传接口
            data: {
                bizId: $('#bizId').val(),
                imageType: 'LIST'
            },
            size: 1000,
            accept: 'file',
            done: function (r) {
                layer.msg(r.msg);
                app.getData();
            },
            error: function (r) {
                layer.msg(r.msg);
            }
        });

        var uploadInst_REAL = upload.render({
            elem: '#test2', //绑定元素
            url: '/usabb/attach/upload', //上传接口
            data: {
                bizId: $('#bizId').val(),
                imageType: 'REAL'
            },
            size: 1000,
            accept: 'file',
            done: function (r) {
                layer.msg(r.msg);
                app.getData();
            },
            error: function (r) {
                layer.msg(r.msg);
            }
        });

        var uploadInst_AVATAR = upload.render({
            elem: '#test3', //绑定元素
            url: '/usabb/attach/upload', //上传接口
            data: {
                bizId: $('#bizId').val(),
                imageType: 'AVATAR'
            },
            size: 1000,
            accept: 'file',
            done: function (r) {
                layer.msg(r.msg);
                app.getData();
            },
            error: function (r) {
                layer.msg(r.msg);
            }
        });

        var uploadInst_WECHAT_QRCODE = upload.render({
            elem: '#test4', //绑定元素
            url: '/usabb/attach/upload', //上传接口
            data: {
                bizId: $('#bizId').val(),
                imageType: 'WECHAT_QRCODE'
            },
            size: 1000,
            accept: 'file',
            done: function (r) {
                layer.msg(r.msg);
                app.getData();
            },
            error: function (r) {
                layer.msg(r.msg);
            }
        });
    });

    function changeType(i, imgType) {
        app.type = i;
        app.offset = 0;
        app.imageType = imgType;
        console.log(imgType);

        app.getData();
    }
</script>


</body>
</html>
